<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图(点击切换版)</title>
    <style>
        * {
            box-sizing: border-box; /*盒子尺寸: 內减模式,  防止 内外边距 设置可能撑大盒子*/
        }

        /* 整个轮播图版面 */
        .轮播图 {
            width: 560px; /* 版面宽高 */
            height: 400px;
            overflow: hidden; /* 溢出:隐藏 */
            margin: 0 auto; /* 版心居中 */
        }

        .轮播图_图片区域 {
            width: 100%; /* 盒子宽随版面(父级), 设置高 */
            height: 320px;
        }

        .轮播图_图片区域 img {
            width: 100%; /* 图片宽高随 父级盒子 */
            height: 100%;
            display: block; /* 显示模式: 块级 */
        }

        .轮播图版面_底板 {
            height: 80px; /* 设置高, 宽随版面(父级) */
            background-color: rgb(100, 67, 68); /* 背景色 */
            padding: 12px 12px 0 12px; /* 内边距: 上, 右, 下, 左 */
            position: relative; /* 定位: 相对定位.  子定父相定位方法*/
        }

        .轮播图版面_底板 .左右切换区域 {
            position: absolute; /* 定位: 绝对定位.  子定父相定位方法*/
            right: 0; /* 偏移量 */
            top: 12px;
            display: flex; /* flex布局 */
        }

        /* 左右切换里 按钮的设置 */
        .轮播图版面_底板 .左右切换区域 button {
            margin-right: 12px; /* 左外边距 */
            width: 28px; /* 宽高 */
            height: 28px;

            appearance: none; /* 这个属性 使元素看上去像一个按钮,官方文档说明 这个不是标准化的,不建议使用 且部分浏览器不支持. 这里这个是教程的代码,所以保留. 了解下就好 */
            border: none; /*去掉边框线*/

            background: rgba(255, 255, 255, 0.1); /* 背景色, 透明度 */
            color: #fff; /* 文字颜色 */
            border-radius: 4px; /* 圆角属性 */
            cursor: pointer; /* 鼠标图形, 这里效果是鼠标悬停圆点 改变鼠标图形 */
        }

        .轮播图版面_底板 .左右切换区域 button:hover {
            background: rgba(255, 255, 255, 0.2); /* 鼠标悬停状态, 改变颜色 */
        }

        .轮播图版面_底板 p {
            margin: 0;
            color: #fff; /* 文字颜色 大小 */
            font-size: 18px;

            margin-bottom: 10px; /* 下外边距 */
        }

        .圆点-滑块区域 {
            margin: 0; /* 外边距 */
            padding: 0; /* 内边距 */
            list-style: none; /* li标签默认的项目图标,清除 */
            display: flex; /* flex布局 */
            align-items: center; /* 侧轴在水平方向，效果圆点 垂直居中 */
        }

        .圆点-滑块区域 li {
            width: 8px; /* 宽高 */
            height: 8px;

            margin: 4px; /* 内边距 */
            border-radius: 50%; /* 圆角属性, 这里是把盒子变成圆形 */

            background: #fff; /* 背景色 */
            opacity: 0.4; /* 背景色:透明度 ,背景半透明*/
            cursor: pointer; /* 鼠标图形, 这里效果是鼠标悬停圆点 改变鼠标图形 */
        }

        .圆点-滑块区域 .白圆点 {
            width: 12px; /* 宽高 */
            height: 12px;
            opacity: 1; /* 背景色 透明度1, 效果不透明 */
        }
    </style>

</head>
<body>

<!--轮播图-->
<div class="轮播图">
    <div class="轮播图_图片区域">
        <img src="../../3_DOM对象/素材/slider01.jpg" alt=""/>
    </div>
    <div class="轮播图版面_底板">
        <p>对人类来说会不会太超前了？</p>
        <ul class="圆点-滑块区域">
            <li class="白圆点"></li> <!-- 每个li是,轮播图的小圆点 -->
            <li></li> <!-- 下面JS方法,添加 "白圆点"类,  相应的li就可以显示对应的白圆点了-->
            <li></li>
            <li></li>
            <li></li>
            <li></li> <!-- data-xxx 自定义属性, 方便点击圆点 切换相应的的属性 -->
            <li></li>
            <li></li>
        </ul>
        <div class="左右切换区域">
            <button class="左键">&lt;</button>
            <button class="右键">&gt;</button>
        </div>
    </div>
</div>



<!--
特别说明: 我这里 事件监听 定时器 里,的函数都是用的匿名函数
因为我使用有名函数,有BUG了. 点开始可以循环,点结束不能停止点名.
原因是函数不断调用,造成在函数里的 定时器编号 不断变, 关闭定时器语法 无法真正关闭定时器
匿名函数只调用一次,赋值的 编号 不会改变, 关闭定时器语法 可以更加定时器编号,改变定时器
-->
<script>
    // 初始数据
    const 数组_对象_轮播图信息 = [
        {图片路径: '../../3_DOM对象/素材/slider01.jpg', 文字标题: '对人类来说会不会太超前了？', 底板颜色: 'rgb(100, 67, 68)'},
        {图片路径: '../../3_DOM对象/素材/slider02.jpg', 文字标题: '开启剑与雪的黑暗传说！', 底板颜色: 'rgb(43, 35, 26)'},
        {图片路径: '../../3_DOM对象/素材/slider03.jpg', 文字标题: '真正的jo厨出现了！', 底板颜色: 'rgb(36, 31, 33)'},
        {图片路径: '../../3_DOM对象/素材/slider04.jpg', 文字标题: '让世界通过B站看到东方大国文化', 底板颜色: 'rgb(139, 98, 66)'},
        {图片路径: '../../3_DOM对象/素材/slider05.jpg', 文字标题: '快来分享你的寒假日常吧~', 底板颜色: 'rgb(67, 90, 92)'},
        {图片路径: '../../3_DOM对象/素材/slider06.jpg', 文字标题: '哔哩哔哩小年YEAH', 底板颜色: 'rgb(166, 131, 143)'},
        {图片路径: '../../3_DOM对象/素材/slider07.jpg', 文字标题: '一站式解决你的电脑配置问题！！！', 底板颜色: 'rgb(53, 29, 25)'},
        {图片路径: '../../3_DOM对象/素材/slider08.jpg', 文字标题: '谁不想和小猫咪贴贴呢！', 底板颜色: 'rgb(99, 72, 114)'},
    ]

    /*
    轮播图点击切换
    需求：当点击左右的按钮，可以切换轮播图
    分析：
    ①：右侧按钮点击，变量++，如果大于等于8，则复原0
    ②：左侧按钮点击，变量--，如果小于0，则复原最后一张
    ③：鼠标经过暂停定时器
    ④：鼠标离开开启定时器
     */

    // 获取DOM元素
    const 轮播图_图片 = document.querySelector('.轮播图 img')
    const p标签_文字 = document.querySelector('.轮播图版面_底板 p')
    const 轮播图_底板 = document.querySelector('.轮播图版面_底板')
    const 左键 = document.querySelector('.左右切换区域 .左键')
    const 右键 = document.querySelector('.左右切换区域 .右键')
    const 轮播图 = document.querySelector('.轮播图')

    let 下标 = 0  // 信号量 控制播放图片张数, 同时也是数组的下标

    // 函数，作用渲染内容
    function 轮播图_渲染内容() {
        轮播图_图片.src = 数组_对象_轮播图信息[下标].图片路径 // 对象.标签属性 属性修改路径
        p标签_文字.innerHTML = 数组_对象_轮播图信息[下标].文字标题 // 对象.innerHTML 修改标签里文本信息
        轮播图_底板.style.backgroundColor = 数组_对象_轮播图信息[下标].底板颜色 // 对象.style.样式属性 修改盒子背景色

        // 更换小圆点    先移除原来的类名， 当前li再添加 这个 类名
        const 删除圆点 = document.querySelector(`.圆点-滑块区域 .白圆点`) // 定位有 .白圆点 的标签元素
        删除圆点.classList.remove('白圆点')
        const 添加圆点 = document.querySelector(`.圆点-滑块区域 li:nth-child(${下标 + 1})`) // 这里注意下标开始是0，但是 :nth-child() 不能传0数
        添加圆点.classList.add('白圆点')
    }


    // 要求:①：右侧按钮点击，变量++，如果大于等于8，则复原0
    // 事件监听 鼠标点击 右键.
    右键.addEventListener('click', function () {
        下标++ // 点击 +1 , 更换图片
        // 判断下标量是否超过 数组长度, 超过归0. 作用可以循环播放轮播图
        if (下标 === 数组_对象_轮播图信息.length) {
            下标 = 0
        }
        轮播图_渲染内容() // 调用函数
    })

    // ②：左侧按钮点击，变量--，如果小于0，则复原最后一张
    // 事件监听 鼠标点击 左键.
    左键.addEventListener('click', function () {
        下标-- // 点击 -1 , 更换图片
        // 判断下标量是否0, 是就赋值数组最后元素下标. 作用返回最后一张图片
        if (下标 < 0) {
            下标 = 数组_对象_轮播图信息.length - 1 // 数组下标从0开始，所以是: 数组长度 减 1
        }
        轮播图_渲染内容() // 调用函数
    })


    // 使用定时器,开启轮播图循环播放
    let 定时器_编号 = setInterval(function () {
        // 利用js自动调用点击事件,  click() 一定加小括号调用函数
        右键.click() // click 是点击事件, 相当于: 对象调用了 点击事件 这个函数
    }, 1000)
    // 右键.click() 实际是模拟点击, ".右键"那个标签的效果. 加上定时器相当于不断点击


    // ③：鼠标经过暂停定时器
    // 事件监听: 鼠标经过
    轮播图.addEventListener('mouseenter', function () {
        clearInterval(定时器_编号) // 关闭定时器
        // console.log(定时器_编号) //控制台看 编号
    })

    // ④：鼠标离开开启定时器
    // 事件监听:  鼠标离开
    轮播图.addEventListener('mouseleave', function () {
        // 开启定时器, 这里实际是开启了新的定时器
        定时器_编号 = setInterval(function () {
            // 利用js自动调用点击事件,  click() 一定加小括号调用函数
            右键.click() // click 是点击事件, 相当于: 对象调用了 点击事件 这个函数
            // console.log(定时器_编号) //控制台看 编号
        }, 1000)
    })


    // ---------- 额外再完成, 点击相应的圆点显示相应的图片 --------


    // 这个函数方法比较笨,保留参考,已经优化for循环的方法
    function 点击圆点_切换图片() {
        // 获取DOM元素, 这里使用All 得到是一个数组
        const 数组_点击圆点 = document.querySelectorAll('.圆点-滑块区域 li')

        // 0对应的是第1个li,以此类推. 点击相应的 圆点li,赋值下标 渲染相应的图片输出
        // 事件监听: 点击事件
        数组_点击圆点[0].addEventListener('click', function () {
            下标 = 0
            轮播图_渲染内容() // 渲染相应的图片输出
        })

        数组_点击圆点[1].addEventListener('click', function () {
            下标 = 1
            轮播图_渲染内容()
        })

        数组_点击圆点[2].addEventListener('click', function () {
            下标 = 2
            轮播图_渲染内容()
        })

        数组_点击圆点[3].addEventListener('click', function () {
            下标 = 3
            轮播图_渲染内容()
        })

        数组_点击圆点[4].addEventListener('click', function () {
            下标 = 4
            轮播图_渲染内容()
        })
        数组_点击圆点[5].addEventListener('click', function () {
            下标 = 5
            轮播图_渲染内容()
        })

        数组_点击圆点[6].addEventListener('click', function () {
            下标 = 6
            轮播图_渲染内容()
        })

        数组_点击圆点[7].addEventListener('click', function () {
            下标 = 7
            轮播图_渲染内容()
        })
    }

    // 调用函数
    // 点击圆点_切换图片()



    // 获取DOM元素, 这里使用All 得到是一个数组
    const 数组_点击圆点 = document.querySelectorAll('.圆点-滑块区域 li')

    // 循环方法,依次注册 点击事件. 和上面 "点击圆点_切换图片()" 函数效果相同,但更加简洁
    for (let i = 0; i < 数组_点击圆点.length; i++) {
        // 0对应的是第1个li,以此类推. 点击相应的 圆点li,赋值下标 渲染相应的图片输出
        // 事件监听: 点击事件
        数组_点击圆点[i].addEventListener('click', function () {
            下标 = i
            console.log(数组_点击圆点)
            轮播图_渲染内容() // 渲染相应的图片输出
        })
    }
</script>
</body>
</html>